<template>
  <div id="app">
    <div class="table">
      <ez-table
        :options="options"
        :columns="columns"
        :dataset="dataset"
        :custom-header="headerHtml"></ez-table>
    </div>
    <button @click="chgHeader">表头</button>
  </div>
</template>

<script>
import EzTable from './components/ez-table';

export default {
  name: 'App',
  components: { EzTable },
  data() {
    return {
      options: {},
      columns: [
        { name: 'field01', title: '姓名', width: '80px', fixed: true },
        {
          name: 'field02',
          title: '工号',
          width: '80px',
          formatter: val => {
            return val.substr(1);
          }
        },
        { name: 'field03', title: '所属部门', width: '120px' },
        { name: 'field04', title: '出生日期', width: '80px', align: 'center' },
        { name: 'field05', title: '联系电话', width: '100px' },
        { name: 'field06', title: '家庭住址', width: '120px' },
        { name: 'field07', title: '入职日期', width: '120px' }
      ],
      headerHtml: {
        fixed: null,
        static: null
      },
      dataset: [
        {
          field01: '张三',
          field02: 'E1001',
          field03: '技术研发部-前端组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2023-03-15',
          field08: '技术研发部-前端组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2023-03-15'
        },
        {
          field01: '李四',
          field02: 'E1002',
          field03: '市场营销部-推广组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2022-09-01',
          field08: '市场营销部-推广组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2022-09-01'
        },
        {
          field01: '王五',
          field02: 'E1003',
          field03: '人力资源部-招聘组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2024-01-10',
          field08: '人力资源部-招聘组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2024-01-10'
        },
        {
          field01: '赵六',
          field02: 'E1004',
          field03: '财务部-审计组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2021-06-22',
          field08: '财务部-审计组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2021-06-22'
        },
        {
          field01: '张三',
          field02: 'E1001',
          field03: '技术研发部-前端组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2023-03-15',
          field08: '技术研发部-前端组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2023-03-15'
        },
        {
          field01: '李四',
          field02: 'E1002',
          field03: '市场营销部-推广组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2022-09-01',
          field08: '市场营销部-推广组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2022-09-01'
        },
        {
          field01: '王五',
          field02: 'E1003',
          field03: '人力资源部-招聘组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2024-01-10',
          field08: '人力资源部-招聘组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2024-01-10'
        },
        {
          field01: '赵六',
          field02: 'E1004',
          field03: '财务部-审计组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2021-06-22',
          field08: '财务部-审计组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2021-06-22'
        },
        {
          field01: '张三',
          field02: 'E1001',
          field03: '技术研发部-前端组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2023-03-15',
          field08: '技术研发部-前端组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2023-03-15'
        },
        {
          field01: '李四',
          field02: 'E1002',
          field03: '市场营销部-推广组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2022-09-01',
          field08: '市场营销部-推广组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2022-09-01'
        },
        {
          field01: '王五',
          field02: 'E1003',
          field03: '人力资源部-招聘组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2024-01-10',
          field08: '人力资源部-招聘组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2024-01-10'
        },
        {
          field01: '赵六',
          field02: 'E1004',
          field03: '财务部-审计组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2021-06-22',
          field08: '财务部-审计组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2021-06-22'
        },
        {
          field01: '张三',
          field02: 'E1001',
          field03: '技术研发部-前端组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2023-03-15',
          field08: '技术研发部-前端组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2023-03-15'
        },
        {
          field01: '李四',
          field02: 'E1002',
          field03: '市场营销部-推广组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2022-09-01',
          field08: '市场营销部-推广组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2022-09-01'
        },
        {
          field01: '王五',
          field02: 'E1003',
          field03: '人力资源部-招聘组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2024-01-10',
          field08: '人力资源部-招聘组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2024-01-10'
        },
        {
          field01: '赵六',
          field02: 'E1004',
          field03: '财务部-审计组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2021-06-22',
          field08: '财务部-审计组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2021-06-22'
        },
        {
          field01: '张三',
          field02: 'E1001',
          field03: '技术研发部-前端组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2023-03-15',
          field08: '技术研发部-前端组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2023-03-15'
        },
        {
          field01: '李四',
          field02: 'E1002',
          field03: '市场营销部-推广组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2022-09-01',
          field08: '市场营销部-推广组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2022-09-01'
        },
        {
          field01: '王五',
          field02: 'E1003',
          field03: '人力资源部-招聘组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2024-01-10',
          field08: '人力资源部-招聘组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2024-01-10'
        },
        {
          field01: '赵六',
          field02: 'E1004',
          field03: '财务部-审计组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2021-06-22',
          field08: '财务部-审计组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2021-06-22'
        },
        {
          field01: '张三',
          field02: 'E1001',
          field03: '技术研发部-前端组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2023-03-15',
          field08: '技术研发部-前端组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2023-03-15'
        },
        {
          field01: '李四',
          field02: 'E1002',
          field03: '市场营销部-推广组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2022-09-01',
          field08: '市场营销部-推广组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2022-09-01'
        },
        {
          field01: '王五',
          field02: 'E1003',
          field03: '人力资源部-招聘组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2024-01-10',
          field08: '人力资源部-招聘组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2024-01-10'
        },
        {
          field01: '赵六',
          field02: 'E1004',
          field03: '财务部-审计组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2021-06-22',
          field08: '财务部-审计组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2021-06-22'
        },
        {
          field01: '张三',
          field02: 'E1001',
          field03: '技术研发部-前端组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2023-03-15',
          field08: '技术研发部-前端组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2023-03-15'
        },
        {
          field01: '李四',
          field02: 'E1002',
          field03: '市场营销部-推广组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2022-09-01',
          field08: '市场营销部-推广组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2022-09-01'
        },
        {
          field01: '王五',
          field02: 'E1003',
          field03: '人力资源部-招聘组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2024-01-10',
          field08: '人力资源部-招聘组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2024-01-10'
        },
        {
          field01: '赵六',
          field02: 'E1004',
          field03: '财务部-审计组',
          field04: '1982',
          field05: '1300000001',
          field06: '辽宁省辽阳市',
          field07: '2021-06-22',
          field08: '财务部-审计组',
          field09: '1982',
          field10: '1300000001',
          field11: '辽宁省辽阳市',
          field12: '2021-06-22'
        }
      ]
    };
  },
  methods: {
    chgHeader() {
      if (this.headerHtml.fixed) {
        this.headerHtml.fixed = null;
        this.headerHtml.static = null;
      } else {
        this.headerHtml.fixed = '<tr><th rowspan="2">姓名</th></tr>';
        this.headerHtml.static =
          '<tr><th rowspan="2">工号</th><th rowspan="2">所属部门</th><th colspan="2">个人信息</th><th colspan="2">家庭信息</th></tr><tr><th>出生日期</th><th>联系电话</th><th>家庭住址</th><th>入职日期</th></tr>';
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  .table {
    padding: 15px;
    height: 600px;
  }
}
</style>
